<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script type="text/javascript" src="js/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/login.css">
<script type="text/javascript">
	$(function () {
		$("#username").change(function () {
			//使用ajax 做username 的异步验证 checkUsername?username=xxxx
			$.get("${pageContext.request.contextPath}/user?method=checkUser", "username=" + this.value, function (data) {//data是一个实体类对象
				// if(data==1){
				// 	$("#usernameMsg").html("用户名已经存在").css("color","red");
				// 	$("#registerBtn").attr("disabled",true);
				// }else{
				// 	$("#usernameMsg").html("用户名可用").css("color","green");
				// 	$("#registerBtn").removeAttr("disabled");
				// }

				if (data.flag) {
					//注册成功，跳转成功页面
					// location.href = "registerSuccess.jsp";
					$("#usernameMsg").html("用户名可用").css("color", "green");
				} else {
					//注册失败，给msg添加提示信息
					$("#usernameMsg").html(data.errorMsg).css("color", "red");
					;
				}

			})
		});
	});


	/*表单校验：
            1.用户名：单词字符，8-20
            2.密码：单词，8-20
            3.email：邮件格式
            5.验证码：非空
         */
	//校验用户名
	/*function checkUsername() {
		//获取用户名的value
		var username = $("#username").val();
		//定义正则
		var reg_username = /^\w{6,20}$/;
		var flag = reg_username.test(username);
		if (flag) {
			//校验正确
			$("#username").css("border", "");

		} else {
			//校验错误
			$("#username").css("border", "1px solid red");
		}

		return flag;
	}*/

	//校验密码
	/*function checkPassword() {
		//获取密码的value
		var password = $("#password").val();
		//定义正则
		var reg_password = /^\w{3,20}$/;
		var flag = reg_password.test(password);
		if (flag) {
			//校验正确
			$("#password").css("border", "");

		} else {
			//校验错误
			$("#password").css("border", "1px solid red");
		}

		return flag;
	}
*/
	//校验邮箱
	function checkEmail() {
		//获取邮箱的value
		var email = $("#email").val();
		//定义正则
		var reg_email = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
		var flag = reg_email.test(email);
		if (flag) {
			//校验正确
			$("#email").css("border", "");

		} else {
			//校验错误
			$("#email").css("border", "1px solid red");
		}

		return flag;
	}


	//校验验证码
	function checkCheck() {
		//获取验证码的value
		var check = $("#checkCode").val();
		//定义正则
		var reg_check = /\S/;
		var flag = reg_check.test(check);
		if (flag) {
			//校验正确
			$("#checkCode").css("border", "");

		} else {
			//校验错误
			$("#checkCode").css("border", "1px solid red");
		}

		return flag;
	}


	//入口函数
	$(function () {
		//当表单提交时调用函数，调用所有的校验方法
		/*$("#registerForm").submit(function () {
			//1.发送数据导服务器
			if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday() && checkCheck()) {
				$.post("./user/regist", $(this).serialize(), function (data) {
					//后台响应的数据
					if (data.flag) {
						//注册成功，跳转成功页面
						location.href = "register_ok.html";
					} else {
						//注册失败，给msg添加提示信息
						$("#msg").html(data.errorMsg);
					}
				});
			}
			//2.跳转页面

			return false;
		});
*/




		//当某一个组件失去焦点时，调用对应的校验方法
		// $("#username").blur(checkUsername);
		// $("#password").blur(checkPassword);
		$("#email").blur(checkEmail);
		$("#checkCode").blur(checkCheck);

	});


</script>
<title>注册</title>
</head>
<body>
	<div class="regist">
		<div class="regist_center">
			<div class="regist_top">
				<div class="left fl"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;会员注册</div>
				<div class="right fr">
					<a href="index.jsp" target="_black">小米商城</a>
				</div>
				<div class="clear"></div>
				<div class="xian center"></div>
			</div>
			<div class="center-block" style="margin-top: 80px;">
				<form class="form-horizontal" action="${pageContext.request.contextPath}/user?method=register" method="post">

					<div class="form-group">
						<label class="col-sm-2 control-label">用户名</label>
						<div class="col-sm-8" style="width: 40%">
							<input type="text" id="username" name="username" class="form-control col-sm-10"
								placeholder="Username" />
						</div>
						<div class="col-sm-2">
						<p class="text-danger"><span class="help-block " id="usernameMsg"></span></p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">密码</label>
						<div class="col-sm-8" style="width: 40%">
							<input type="password" name="upassword"
								class="form-control col-sm-10" placeholder="Password" />
						</div>
						<div class="col-sm-2">
						<p class="text-danger"><span id="helpBlock1" class="help-block ">请输入6位以上字符</span></p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">确认密码</label>
						<div class="col-sm-8" style="width: 40%">
							<input type="password" class="form-control col-sm-10"
								placeholder="Password Again" />
						</div>
						<div class="col-sm-2">
						<p class="text-danger"><span id="helpBlock2" class="help-block ">两次密码要输入一致哦</span></p>
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label">邮箱</label>
						<div class="col-sm-8" style="width: 40%">
							<input type="text" name="email" id="email" class="form-control col-sm-10"
								placeholder="Email" />
						</div>
						<div class="col-sm-2">
						<p class="text-danger"><span id="helpBlock3" class="help-block ">填写正确邮箱格式</span></p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">性别</label>
						<div class="col-sm-8" style="width: 40%">
							<label class="radio-inline"> <input type="radio"
								name="usex" value="男" checked> 男
							</label> <label class="radio-inline"> <input type="radio"
								name="usex" value="女"> 女
							</label>
						</div>
						<div class="col-sm-2">
						<p class="text-danger"><span id="helpBlock4" class="help-block ">你是帅哥 还是美女</span></p>
						</div>
					</div>
					<div class="form-group">

						<label class="col-sm-2 control-label">验证码</label>
						<div class="col-sm-8" style="width: 40%">
							<input type="text" name="checkCode" id="checkCode" class="form-control col-sm-10"
								   placeholder="输入验证码" />
						</div>

<%--						<label class="col-sm-2 control-label">验证码</label>--%>
<%--						<div class="col-sm-8" style="width: 40%">--%>
<%--							<label class="radio-inline"> <input type="text"--%>
<%--																name="checkCode" placeholder="输入验证码">--%>
<%--							</label> <label class="radio-inline"> --%>
<%--						</label>--%>
<%--						</div>--%>

						<div class="col-sm-2">
							<img src="checkCode" alt="">
<%--							<p class="text-danger"><span id="helpBlock5" class="help-block ">验证码</span></p>--%>
						</div>
					</div>
					<hr>
					<div class="form-group">
						<div class="col-sm-7 col-sm-push-2">
							<input id="registerBtn" type="submit" value="注册" class="btn btn-primary  btn-lg" style="width: 200px;" /> &nbsp; &nbsp;
							<input type="reset" value="重置" class="btn btn-default  btn-lg" style="width: 200px;"  />
						</div>
					</div>
					<div class="col-sm-7 col-sm-push-2 ext-danger" style="color: red">${registerMsg}</div>
				</form>

			</div>
		</div>
	</div>

</body>
</html>